<template>
  <div class="row">
    <!-- 0:欢迎来到红浪漫 -->
    <div v-show="scene==0">欢迎来到红浪漫</div>
     <!--1：正在加载 -->
    <div v-show="scene==1">loading............</div>
    <!-- 2:用户数据回来，进行展示 -->
    <div class="card" v-for="(user,index) in list" :key="user.id" v-show="scene==2">
      <a :href="user.html_url" target="_blank">
        <img :src="user.avatar_url" style="width: 100px" />
      </a>
      <p class="card-text">{{user.login}}</p>
    </div>
    <!-- 3:404 -->
    <div v-show="scene==3">404</div>
  </div>
</template>

<script>
//引入axios
import axios from 'axios';
export default {
  name: "",
  data(){
    return {
       list:[],
       //切换场景的属性
       scene:0
    }
  },
  //兄弟组件Footer
  mounted(){
    //接受兄弟组件传递过来的数据
    //箭头函数与function有区别this
    this.$bus.$on('sendKeyword',async (keyword)=>{
          //数据还未回来，场景的数值为1---正在加载
          this.scene = 1;
          //发请求:当前不需要配置代理跨域因为人家设置CORS
          try {
           let result  = await axios.get('https://api.github.com/search/users?q='+keyword);
           this.list = result.data.items;
           //切换场景2 
           this.scene = 2;
          } catch (error) {
            //失败干什么
            this.scene = 3;
          }
    })
  }
};
</script>

<style scoped>
</style>
